<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <!-- 定义UI结构 -->
    <input type="file" id="file1">
    <button class="btn btn-primary" id="upfile">上传</button>

</body>

</html>
<script src="./js/jquery.js"></script>
<script>
    $(document).ajaxStart(function () {
        console.log('文件上传开始');
    })
    $(document).ajaxStop(function () {
        console.log('文件上传OK');
    })
    // 验证是否选择文件
    $('#upfile').on('click', function () {
        // 获取文件
        const files = $('#file1')[0].files;
        // 判断是否选择了文件
        if (files.length > 0) {
            // 向formdata追加文件
            const fd = new FormData();
            fd.append('avatar', files[0])
            $.ajax({
                type: 'post',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                // 不修改contentType，会默认使用x-www方式
                contentType: false,
                processData: false,
                success: function (res) {
                    console.log(res);
                }
            })
        } else {
            alert('请选择图片再操作');
        }
    })
</script>